<template>
	<div class="warp">
		<div class="picker-warp"  :class="isMust? 'must' : ''">
			<picker class="picker" mode="date"  :fields="type" value="2021-01-01" @change="handlerChangeDatePicker" :class="currentDate ? '' : 'off'">
				{{ currentDate? currentDate  : placeholder}}
			</picker>
		</div>
		<div class="icon down"><image src="/static/icons/arrowright.png" alt="" /></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			index:-1,
			value:0,
			currentDate:'',
		};
	},
	props: {
		isMust: {
			type: Boolean,
			default: () => {
				return false
			}
		},
		placeholder: {
			type: String,
			default: () => {
				return '请选择时间';
			}
		},
		type: {
			type: String,
			default: () => {
				return 'day';
			}
		},
		startTime: {
			type: String,
			default: () => {
				return '请选择时间';
			}
		},
		time: {
			type: String,
			default: () => {
				return '';
			}
		},
	},
	watch: {
		time(value){
			this.currentDate = value
		},
	},
	onShow() {
		
	},
	mounted() {
		
	},
	methods: {
		handlerChangeDatePicker(e) {
			this.currentDate = e.detail.value
			this.$emit('getTime',this.currentDate)
			console.log(e)
			// this.getPageList()
		},
	},
	filters: {
		fmtDate(value) {
			if (!value) return ''
			let arr = value.split('-')
			return arr[0] + '年' + arr[1] + '月'
		},
		fmtData2(value) {
			if (!value) return ''
			let arr = value.split('.')
			arr = arr[0].split('T')
			let arr1 = arr[0].split('-')
			let arr2 = arr[1].split(':')
			return arr1[1] + '月' + arr1[2] + '日 ' + arr2[0] + ':' + arr2[1]
		},
		fmtNumber(value) {
			if (!value) return 0.00
			 value = Math.floor(value * 100) / 100
			 return value
		}
	},
};
</script>

<style scoped lang="scss">
.warp {
	display: flex;
	align-items: center;
	height: 80rpx;
	border:1px solid #EBEBEB;
	position: relative;
	input {
		width: 100%;
		height: 100%;
		font-size: 30rpx;
		line-height: 1;
		color: #000;
	}
	.icon {
		width: 18rpx;
		height: 30rpx;
		font-size: 0;
		margin-right: 20rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.picker-warp {
		width: 100%;
		padding: 0 20rpx;
		box-sizing:border-box;
		.picker {
			width: 400rpx;
			font-size: 30rpx;
			line-height: 4;
			color: #000;
			white-space: nowrap;
			overflow: hidden;
			box-sizing: border-box;
			text-overflow: ellipsis;
		}
		.off {
			color: #999999!important;
		}
	}
}

.down {
	width: 30rpx;
	height: 20rpx;
	font-size: 0;
	margin-right: 5rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.must{
	&:after{
		content:"*";
		position:absolute;
		top:50%;
		left: -30rpx;
		transform: translateY(-50%);
		font-size: 40rpx;
		color: rgba(238, 47, 62, 1);
	}
}
</style>
